<template>
  <div class="navMenu">
    <el-menu class="el-menu" mode="horizontal">
      <el-menu-item index="1">
        首页
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          国内学生
        </template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">国际学生</el-menu-item>
      <el-submenu index="4">
        <template slot="title">学科大类</template>
        <el-menu-item index="4-1">选项1</el-menu-item>
        <el-menu-item index="4-2">选项2</el-menu-item>
        <el-menu-item index="4-3">选项3</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">走进清华</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">奖助学金</template>
        <el-menu-item index="6-1">选项1</el-menu-item>
        <el-menu-item index="6-2">选项2</el-menu-item>
        <el-menu-item index="6-3">选项3</el-menu-item>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">信息公开</template>
        <el-menu-item index="7-1">选项1</el-menu-item>
        <el-menu-item index="7-2">选项2</el-menu-item>
        <el-menu-item index="7-3">选项3</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import Vue from 'vue';
import {Menu, MenuItem, Submenu} from 'element-ui';

Vue.use(Menu);
Vue.use(MenuItem);
Vue.use(Submenu);
export default {
  name: "navMenu"
}
</script>

<style lang="less" scoped>
/deep/ .el-menu-item {

}

.navMenu {
  padding: 2rem;

  .el-menu{
    margin: 0 4rem;
  }

}

</style>